<template>

  <div class="app-container" >

    <div class="big-container">
      <!-- 3X3九宫格   共计9个模块 -->
      <!-- 1(地图)   2(散点)    3(饼)  -->
      <!-- 4(list)  5(list)   6(饼)   -->
      <!-- 7(折线)   8(柱状)   9(柱状)  -->
      <div class="chart1 chart" style="margin-top: 30px" :option="option1" @click="go">
        <img src="@/assets/bigscreen_imgs/bigscreen.png" class="smallscreen" alt="">
      </div>

      <div style="margin-top: 30px">
        <span style="padding-left: 30px;color:white">设备异常报警 单位：次</span>
        <v-chart class="chart2   chart" :option="option2" />
      </div>
      <div style="margin-top: 30px">
        <span style="color:white">入住科室统计</span>
        <v-chart class="chart3 chart" :option="option3" />
      </div>
      <div class="chart4  chart ">
        <div class="chart4_list">

          <div style="color:white" class="chart4_tiltle"><img class="log" src="@/assets/dashboard_img/bianji.svg">我的申请</div>

          <div class="chart4_body">
            <div class="list "><div>[购置申请] </div> <div>8-2 </div> <div style="color:white">申请购置</div>  <div>数字眼底检查仪</div>   <div style="color:orange;position: absolute;right: 10px;">审批中</div></div>
            <div class="list "><div>[购置申请] </div> <div>8-19 </div> <div style="color:white">申请购置</div>  <div>裂隙灯显微镜</div>   <div style="color:green;position: absolute;right: 10px;">已通过</div></div>
            <div class="list "><div>[论证申报] </div> <div>8-23 </div> <div style="color:white">申请购置</div>  <div>全自动血液分析</div>   <div style="color:green;position: absolute;right: 10px;">已通过</div></div>
            <div class="list "><div>[维修申请] </div> <div>8-24 </div> <div style="color:white">申请维修</div>  <div>超声诊断仪</div>   <div style="color:orange;position: absolute;right: 10px;">待派工</div></div>
            <div class="list "><div>[转科申请] </div> <div>8-29 </div> <div style="color:white">申请转科</div>  <div>裂隙灯显微镜</div>   <div style="color:green;position: absolute;right: 10px;">已通过</div></div>

          </div>
        </div>
      </div>
      <!-- 5 -->
      <div class="chart5 chart">
        <div class="chart5_list">

          <div style="color:white" class="chart5_tiltle"><img class="log" src="@/assets/dashboard_img/bianji.svg">我的待办</div>

          <div class="chart5_body">
            <div class="list1 "><div>[购置审批] </div> <div>8-1 </div> <div style="color:white">申请购置</div>  <div>数字眼底检查仪</div>   <div style="color:orange;position: absolute;right: 10px;">待审批</div></div>
            <div class="list1 "><div>[购置审批] </div> <div>8-10 </div> <div style="color:white">申请购置</div>  <div>裂隙灯显微镜</div>   <div style="color:orange;position: absolute;right: 10px;">待审批</div></div>
            <div class="list1 "><div>[论证审批] </div> <div>8-11 </div> <div style="color:white">申请购置</div>  <div>全自动血液分析</div>   <div style="color:orange;position: absolute;right: 10px;">待审批</div></div>
            <div class="list1 "><div>[转科审批] </div> <div>8-23 </div> <div style="color:white">申请转科</div>  <div>超声诊断仪</div>   <div style="color:orange;position: absolute;right: 10px;">待审批</div></div>
            <div class="list1 "><div>[维修申请] </div> <div>8-29 </div> <div style="color:white">申请维修</div>  <div>裂隙灯显微镜</div>   <div style="color:orange;position: absolute;right: 10px;">待审批</div></div>

          </div>
        </div>

      </div>

      <div style="margin-top: 30px">
        <span style="color:white">设备数量占比</span>
        <v-chart title="aaa" class="chart6 chart" :option="option6" />
      </div>
      <div style="margin-top: 30px">
        <span style="color:white">每月入住性别统计 单位：人</span>
        <v-chart class="chart7 chart" :option="option7" />
      </div>
      <div style="margin-top: 30px">
        <span style="color:white">出入院人数统计 单位：人</span>
        <v-chart class="chart8 chart" :option="option8" />
      </div>
      <div style="margin-top: 30px">
        <span style="color:white">日用电量统计 单位：w</span>
        <v-chart style="padding-top: 30px" class="chart9 chart" :option="option9" />
      </div>
    </div>
    <el-dialog title="设备详情" :visible.sync="show" width="95%">
      <img src="@/assets/bigscreen_imgs/bigscreen.png" width="100%">
    </el-dialog>
  </div>
</template>

<script>
import { use } from 'echarts/core'
import * as echarts from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart, { THEME_KEY } from 'vue-echarts'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  name: 'Dashboard',
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: 'dark'
  },
  data() {
    return {
      show: false,
      // 1
      option1:
     {
       color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],

       legend: {
         data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
       },

       grid: {
         left: '3%',
         right: '4%',
         bottom: '3%',
         containLabel: true
       },
       xAxis: [
         {
           type: 'category',
           boundaryGap: false,
           data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
         }
       ],
       yAxis: [
         {
           type: 'value'
         }
       ],
       series: [
         {
           name: 'Line 1',
           type: 'line',
           stack: 'Total',
           smooth: true,
           lineStyle: {
             width: 0
           },
           showSymbol: false,
           areaStyle: {
             opacity: 0.8,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
                 color: 'rgb(23,163,98)'
               },
               {
                 offset: 1,
                 color: 'rgb(1, 191, 236)'
               }
             ])
           },
           emphasis: {
             focus: 'series'
           },
           data: [140, 232, 101, 264, 90, 340, 250]
         },
         {
           name: 'Line 2',
           type: 'line',
           stack: 'Total',
           smooth: true,
           lineStyle: {
             width: 0
           },
           showSymbol: false,
           areaStyle: {
             opacity: 0.8,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
                 color: 'rgb(12,149,108)'
               },
               {
                 offset: 1,
                 color: 'rgb(77, 119, 255)'
               }
             ])
           },
           emphasis: {
             focus: 'series'
           },
           data: [120, 282, 111, 234, 220, 340, 310]
         },
         {
           name: 'Line 3',
           type: 'line',
           stack: 'Total',
           smooth: true,
           lineStyle: {
             width: 0
           },
           showSymbol: false,
           areaStyle: {
             opacity: 0.8,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
                 color: 'rgb(55, 162, 255)'
               },
               {
                 offset: 1,
                 color: 'rgb(116, 21, 219)'
               }
             ])
           },
           emphasis: {
             focus: 'series'
           },
           data: [320, 132, 201, 334, 190, 130, 220]
         },
         {
           name: 'Line 4',
           type: 'line',
           stack: 'Total',
           smooth: true,
           lineStyle: {
             width: 0
           },
           showSymbol: false,
           areaStyle: {
             opacity: 0.8,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
                 color: 'rgb(255, 0, 135)'
               },
               {
                 offset: 1,
                 color: 'rgb(135, 0, 157)'
               }
             ])
           },
           emphasis: {
             focus: 'series'
           },
           data: [220, 402, 231, 134, 190, 230, 120]
         },
         {
           name: 'Line 5',
           type: 'line',
           stack: 'Total',
           smooth: true,
           lineStyle: {
             width: 0
           },
           showSymbol: false,
           label: {
             show: true,
             position: 'top'
           },
           areaStyle: {
             opacity: 0.8,
             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
                 color: 'rgb(255, 191, 0)'
               },
               {
                 offset: 1,
                 color: 'rgb(224, 62, 76)'
               }
             ])
           },
           emphasis: {
             focus: 'series'
           },
           data: [220, 302, 181, 234, 210, 290, 150]
         }
       ]
     },
      // 2
      option2:

        {
          grid: {
            left: '8%',
            right: '9%',
            bottom: '7%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value} '
              },
              splitLine: {
                show: false
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              axisLabel: {
                formatter: '{value} '
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [
            {
              name: 'Female',
              type: 'scatter',
              emphasis: {
                focus: 'series'
              },
              // prettier-ignore
              data: [[1.0, 10.4], [3.0, 20.9], [5.0, 13.4], [7.0, 21.9], [9.0, 0.4], [11.0, 0.9]
              ],
              // data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
              //   [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
              //   [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
              //   [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8]
              // ],
              markArea: {
                silent: true,
                itemStyle: {
                  color: 'transparent',
                  borderType: 'dashed'
                }

              }

            },
            {
              name: 'Male',
              type: 'scatter',
              emphasis: {
                focus: 'series'
              },
              // prettier-ignore
              data: [[2.0, 0.4], [4.0, 10.9], [6.0, 33.4], [8.0, 1.9], [10.0, 20.4], [12.0, 0.9]
              ],
              // data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
              //   [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
              //   [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
              //   [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9]
              // ],
              markArea: {
                silent: true
              }

            }
          ]
        },

      // 3
      option3:
          {
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
              data: [
                '外科',
                '内科',
                '神经科 Engine',
                'Email',
                'Union Ads',
                'Video Ads',
                'Baidu',
                'Google',
                'Bing',
                'Others'
              ]
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                  position: 'inner',
                  fontSize: 8
                },
                labelLine: {
                  show: false
                },
                data: [
                  { value: 1548, name: '神经科 ' },
                  { value: 775, name: '外科' },
                  { value: 679, name: '内科', selected: true }
                ]
              },
              {
                name: '',
                type: 'pie',
                radius: ['45%', '60%'],

                labelLine: {
                  length: 10
                },
                label: {
                  formatter: '{b|{b}：}{c}  ',
                  backgroundColor: '',
                  borderColor: '',
                  borderWidth: 0,
                  borderRadius: 4,
                  rich: {
                    b: {
                      color: '#',
                      fontSize: 10,

                      lineHeight: 15
                    },
                    per: {
                      color: 'black',

                      padding: [3, 4],
                      borderRadius: 4
                    }
                  }
                },
                data: [
                  { value: 1048, name: '神经科' },
                  { value: 335, name: '康复科' },
                  { value: 310, name: '耳鼻喉科' },
                  { value: 251, name: '内分泌科' },

                  { value: 147, name: '妇产科' },

                  { value: 102, name: '其他' }
                ]
              }
            ]
          },
      // 6 饼
      option6: {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [20, 90],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '数字眼底检查仪' },
              { value: 32, name: '裂隙灯显微镜' },
              { value: 28, name: '全自动血液分析' },
              { value: 26, name: '超声诊断仪' },
              { value: 22, name: '核磁共振检查仪' }
            ]
          }
        ]
      },
      //  7  折线图
      option7:
      {
        title: {
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['男', '女']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '女',
            type: 'line',
            stack: 'Total',
            data: [4, 5, 8, 12, 14, 19, 22, 28, 26, 22, 20, 18]
          },
          {
            name: '男',
            type: 'line',
            stack: 'Total',
            data: [3, 4, 5, 8, 12, 14, 19, 22, 28, 26, 22, 20, 20]
          }

        ]
      },
      // 8   侧方柱状图
      option8:
      {
        title: {
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '9%',
          right: '4%',
          bottom: '8%',
          containLabel: false
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        series: [
          {
            name: '入院',
            type: 'bar',
            data: [4, 6, 8, 6, 9, 10, 14, 17, 21, 18, 15, 13]
          },
          {
            name: '出院',
            type: 'bar',
            data: [3, 5, 7, 8, 9, 11, 15, 18, 20, 16, 13, 11]
          }
        ]
      },
      // 9  柱状图
      option9:
      {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['Forest', 'Steppe', 'Desert', 'Wetland']
        },

        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['0点', '2点', '4点', '6点', '8点', '10点', '12点', '14点', '16点', '18点', '20点', '22点']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          // {
          //   name: '',
          //   type: 'bar',
          //   barGap: 0,
          //
          //   emphasis: {
          //     focus: 'series'
          //   },
          //   data: [66, 77, 88, 111, 142, 155, 188, 211, 188, 177, 155, 99]
          // },
          {
            name: '',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [20, 24, 35, 43, 60, 120, 130, 140, 150, 133, 50, 70]
          }

        ]
      }

    }
  },
  methods: {
    go() {
      window.open('http://localhost:8091/#/')
      // this.show = true
    }
  }
}
</script>

<style  lang="scss" scoped>
.app-container{
  background-color: #0F0D2AFF;
}
.big-container
   {

             width: 1504px;
              height: 1000px;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              align-content: space-around;
              flex-wrap: wrap;
              justify-content: center;
              align-items: center;
              .chart {
                width: 400px;
                height:250px  ;
                // outline: 1px   solid  #ccc ;
                padding: 10px 15px ;
                //外框  不影响盒模型
              // 优先固定的数据  宽高

              }
              .chart1{
                display: flex;
                justify-content: center;
                align-items: center;
                .screen1{
                  display:relative;
                  width: 100%;
                  .jing1{
                    display: absolute;
                    width:50px ;
                    height: 50px;
                    top: 150px;
                    right: 80px;
                  }
                }

              }
              .smallscreen{
                width: 380px;

                margin: 0 auto;
              }
              .fangdajing{
                width: 50px;
                z-index: 9;

              }
              .chart2{
                width: 400px;
              }
              .chart3{
                width: 400px;
              }
              .chart4{
                display: flex;
                justify-content: center;
                padding: 10px 3px;

              .chart4_list{
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;

                .chart4_tiltle{
                  font-size: 18px;
                  font-weight: 800;
                  width: 300px;
                  height: 30px;
                  margin: 0 auto;
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .log {
                    width: 20px;

                  }}
                  .chart4_body{
                      width: 400px;
                      height: 100%;
                      display: flex;
                      align-content: center;
                      justify-content: flex-start;
                      align-content: flex-start;
                      flex-wrap: wrap;
                      padding: 37px;
                      .list{
                        font-size: 12px;
                        color: green;
                        margin:10px 5px;
                        display: flex;
                        position: relative;
                        width: 400px;

                      }

                  }

              }}

              //5
              .chart5{
                display: flex;
                justify-content: center;
                padding: 10px 3px;

              .chart5_list{
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                align-items: center;

                .chart5_tiltle{
                  font-size: 18px;
                  font-weight: 800;
                  width: 300px;
                  height: 30px;
                  margin: 0 auto;
                  display: flex;
                  justify-content: flex-start;
                  align-items: center;
                  .log {
                    width: 20px;

                  }}
                  .chart5_body{
                      width: 400px;
                      height: 100%;
                      display: flex;
                      justify-content: flex-start;
                      align-content: flex-start;
                      flex-wrap: wrap;
                      padding: 37px;
                      .list1{
                        font-size: 12px;
                        color:green;
                        margin:10px 5px;
                        display: flex;
                        position: relative;
                       width: 400px;

                      }

                      }
                  }

                  }
                  .chart6{
                    width: 400px;
                    height: 350px;
                  }
           }
</style>
